<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的</title>
    <link type="text/css" rel="stylesheet" href="../css/iconfont.css">
    <link type="text/css" rel="stylesheet" href="../css/flex.css">
    <link type="text/css" rel="stylesheet" href="../css/public.css">
    <link type="text/css" rel="stylesheet" href="../css/skin.css">
    <script src="../api.js"></script>
    <script src="../js/sign.min.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../js/appmoduleconfig.js"></script>
    <script src="../js/vue.js"></script>
    <script src="my.js"></script>
    <script type="text/javascript" language="javascript"
            src="mykind/mykind.nocache.js"></script>
    <style>
html {
	background: #F2F5F6;
}

.user-info {
	width: 100%;
	height: 5.333333rem;
	padding-top: 0.533333rem;
	color: #FFFFFF;
}

.head-icon {
	width: 1.866666rem;
	height: 1.866666rem;
	margin: 1.066666rem auto 0.346666rem;
	border-radius: 50%;
	background-size: 1.866666rem 1.866666rem;
}

.nickname {
	min-height: 1em;
	line-height: 1;
}

.user-info>span {
	padding-top: 0.266666rem;
	color: rgba(255, 255, 255, 0.5);
}

.order-div {
	background: #FFFFFF;
	width: 9.2rem;
	height: 3.346666rem;
	padding: 0 0.4rem;
	margin-top: 0.266666rem;
}

.order-all {
	height: 1.066666rem;
	color: #AAAAAA;
}

.order-all>span {
	color: #333333;
}

.order-all>i {
	font-size: 0.32rem;
	margin-left: 0.2rem;
	font-weight: bold;
}

.order-cell {
	min-width: 1.333333rem;
	color: #666;
}

.order-cell>i {
	width: 0.6rem;
	height: 0.6rem;
	font-size: 0.6rem;
	margin: 0.48rem 0 0.36rem 0;
	position: relative;
}

.order-bubble {
	color: #FFFFFF;
	text-align: center;
	position: absolute;
	border-radius: 100px;
	left: 90%;
	top: -10px;
	padding: 1px 6px;
	margin-left: -10px;
	line-height: 1.4;
}

.entry-list-cell {
	width: 100%;
	height: 1.466666rem;
	background: #FFFFFF;
	color: #333;
}

.entry-list-cell>i {
	margin: 0 0.426666rem 0 0.693333rem;
	font-size: 0.533333rem !important;
}

.entry-list-cell>label {
	padding-right: 0.4rem;
}

.first-entry {
	margin-top: 0.266666rem;
}

.icon{
    width:0.48rem;
    height:0.48rem;
    margin:0rem 0.4rem 0rem 0.533333rem;
}

    </style>
</head>

<body>
<div id="my_page">
    <div class="flex-v flex-vc baseBgColorNoActive user-info"
        >
        <div class="head-icon"
             :style="'background-image:url('+userinfo.icon+')'"></div>
        <div class="fontsize34 nickname">{{userinfo.nickName}}</div>
        <span class="fontsize28">{{userinfo.phone}}</span>
    </div>
    <!--订单-->
    <div class="flex-v order-div" v-if='orderItems'>
        <div class="flex-h flex-vc fontsize24 order-all"
             @click="goEntryByUrl('shop-app/orderlist.html')">
            <span class="flex1">我的订单</span> <label>查看更多</label> <i
                class="iconfont icon-rightangel"></i>
        </div>
        <div class="flex1 flex-h flex-hsb xb_border eee fontsize22">
            <div v-for="(order, index) in orderItems " :key="'order'+index"
                 class="flex-v flex-vc order-cell"
                 @click="goEntryByUrl(order.goUrl)">
                <i :class="'iconfont '+order.icon">
                    <div class="baseBgColorNoActive fontsize14 order-bubble"
                         v-show="bubbleList[index]>0">{{bubbleList[index]|formatBubbleNum}}</div>
                </i>
                <div>{{order.name}}</div>
            </div>
        </div>
    </div>
    <!--各页面入口-->
    <div v-for="(item, index) in entryItems" :key="'entry'+index"
         class="flex-h flex-vc fontsize28 entry-list-cell"
         :class="{'xb_border eee':index!=0,'first-entry':entryTop(index)}"
         @click="goEntry(index)">
        <image class="icon" :src="item.icon"></image> <span class="flex1">{{item.name}}</span>
        <label>{{item.text}}</label>
    </div>
</div>
</body>
<script>
	var mypage = new Vue({
		el : '#my_page',
		data : {
			orderItems : window.orderlist ? window.orderlist : null,
			entryItems : enterlist,
			entryNum : numlist,
			userbeanstr : window.localStorage.getItem("XIAOBUUSERBEAN"),
			bubbleList : []
		},
		computed : {
			userinfo : function() {
				var userbean = this.userbeanstr ? JSON.parse(this.userbeanstr)
						: null;
				if (userbean && userbean.IS_LOGIN === "1") {
					return {
						icon : userbean.ICON ? userbean.ICON
								: "./images/my/head_def.png",
						nickName : userbean.NICK_NAME ? userbean.NICK_NAME
								: userbean.PHONE,
						phone : userbean.PHONE.replace(/^(\d{3})\d{4}(\d+)/,
								"$1****$2")
					}
				} else {
					return {
						icon : "./images/my/head_def.png",
						nickName : "立即登录 ",
						phone : "必不可少的生活方式 "
					}
				}
			}
		},
		filters : {
			formatBubbleNum : function(num) {
				return num > 99 ? "99+" : num;
			}
		},
		methods : {
			entryTop : function(index) {
				if (this.entryNum && this.entryNum.length > 0) {
					return this.entryNum.indexOf(index) != -1;
				}
				return false;
			},
			goEntry : function(index) {
				if (window.onMenubarSelect) {
					window.onMenubarSelect(index + 1);
				}
			},
			goEntryByUrl : function(url) {
				if (window.callGWTFn) {
					window.callGWTFn(url, true);
				}
			}
		}
	})

</script>
</html>